<style lang="sass" scoped>
    .container{
        padding-bottom: 130px;
    }
    .top{
        height:442px;
        img{
            display:block;
            width:100%;
            height:100%;
        }
    }
    .cont{
        padding-top:10px;
        // background:#ffe600;
        .imgs{
            width:682px;
            margin:0 auto;
            justify-content: space-between;
            flex-wrap: wrap;
            .group{
                width:214px;
                min-width:214px;
                height:214px;
                margin-bottom:20px;
                img{
                    display:block;
                    height:100%;
                    width:100%;
                }
            }
        }
    }
    .buy-all{
        height:130px;
        position:fixed;
        bottom:0;
        width:100%;
        z-index:10;
        background:#ff6e6e;
        align-items:center;
        justify-content:center;
        .text{
            color:#fff;
            font-size:48px;
            height:52px;
            line-height:52px;
            margin-right:10px;
        }
        .price-cont{
            align-items:flex-end;
            height:52px;
            .currency{
                color:#fff;
                font-size:24px;
            }
            .price{
                color:#fff;
                font-size:48px;
                height:50px;
                line-height:50px;
            }
        }
    }
</style>
<template>
    <div class="container" :style="{'backgroundColor':backgroundColor}">
        <div class="top">
            <img :src="imageUrl" alt="">
        </div>
        <div class="cont" :style="{'backgroundColor':backgroundColor}">
            <div class="imgs flex">
                <router-link :to="{name:'detail',query:{itemCode:item.itemCode}}" tag="div" v-for="(item,i) in list" class="group flex">
                    <img :src="item.mainImageUrl" alt="">
                </router-link>
            </div>
        </div>

        <div @click.stop="buyAll()" class="buy-all flex">
            <div class="text">一键购买</div>
            <div class="price-cont flex">
                <div class="currency">￥</div>
                <div class="price">{{totalFee}}</div>
            </div>
        </div>

        <bookcar></bookcar>
        <totop></totop>
    </div>
</template>
<script>
    import totop from "commonvue/totop";
    import bookcar from "commonvue/bookcar";
    export default {
        components: {
            totop,
            bookcar,
        },
        data() {
            return {
                search:{
                    contextId:'',//	是	string	类目ID
                    // startNum:0,//	是	string	下一页开始值
                },
                imageUrl:'',
                end:false,
                list:[],
                totalFee:0,
                backgroundColor:'#fff',
            };
        },
        watch:{
        },
        created(){
            this.search.contextId = this.$route.query.contextId;
        },
        mounted() {
            this.$nextTick(() => {
                
                if(this.$route.query.contextId){
                    this.getList();
                }
            });
        },
        methods: {
            getList(){
                let param = JSON.parse(JSON.stringify(this.search));
                util.ajax({
                    url:config.baseApi + 'bookMall-h5/api/item/getItemListByColumnCode',
                    data:param,
                    success:(data=>{
                        this.list = data.data.itemList;
                        this.totalFee = data.data.totalFee;
                        // this.search.startNum = data.data.startNum;
                        this.imageUrl = data.data.detailBannerImageUrl;
                        this.backgroundColor = data.data.backgroundColor;
                        $('body')[0].style.backgroundColor = data.data.backgroundColor;
                    })
                })
            },
            addBook(item){
                server.addShoppingCar(item.itemCode)
            },
            buyAll(){
                let list = JSON.parse(JSON.stringify(this.list));
                let arr = [];
                list.forEach((item,i) => {
                    arr.push(item.itemCode)
                });
                router.push({name:'order_confirm',query:{itemCode:arr.toString()}})
            }
        },
        
    };
</script>